<%--suppress ALL --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<!doctype html>
<html lang="zh">
<head>
    <title>main</title>
    <%@include file="/common/header.jspf" %>
    <script type="text/javascript" src="${ctx}/resources/echars/echarts.min.js"></script>
    <style type="text/css">
        .content{width: 100%;min-width:1410px;clear: both;}
        .left{width: 82%;float: left;}
        .right{width: 18%;min-width:250px;float: right;}
        .title{width: 100%;clear: both;overflow: hidden}
        .title img{float: left;margin: 1%;}
        .title h2{font-weight: normal;font-size: 18px;color: #2d2c2c;float: left;margin-top: 1%}
        .left-content{width: 100%;clear: both}
        .left-content li{float: left;width: 33.3%;}
        .matter{background: url("${ctx}/resources/themes/images/examine_03.png") no-repeat;width: 310px;height: 210px;margin:5% auto;overflow: hidden;cursor: pointer}
        .task{background: url("${ctx}/resources/themes/images/rectify_03.png") no-repeat;width: 310px;height: 210px;margin:5% auto;overflow: hidden;cursor: pointer}
        .project{background: url("${ctx}/resources/themes/images/check_03.png") no-repeat;width: 310px;height: 210px;margin:5% auto;overflow: hidden;cursor: pointer}
        .matter p,.task p,.project p{margin:16% 0 0 45%;display: block;color: #fff;font-size: 16px;}
        .matter span,.task span,.project span{font-size: 60px;}
        .matter a,.task a,.project a{font-size: 12px;color: #fff;margin:7% ;display: block;float: left}
        .bottom{width: 100%;overflow: hidden;clear: both;}
        .peril{float: left;width: 50%;margin-top: 1%;box-shadow: #666 0px 0px 10px;background: #fff; }
        .risk{float: left;width: 50%;margin-top: 1%;box-shadow: #666 0px 0px 10px;background: #fff;}
        .peril p,.risk p{font-size: 14px;clear: both;margin-left: 3%;color: #6d6c6c}
        .peril p span,.risk p span{color: #ff0000}
        .peril .tu{width: 100%;}
        .risk .tu{width: 100%;}
        .right-top{width: 100%;box-shadow: #666 0px 0px 10px;background: #fff;margin-top: 1%;clear: both;overflow: hidden}
        .approve{width: 80%;border-left: 1px solid #EAE9E9;border-right: 1px solid #EAE9E9;border-bottom: 1px solid #EAE9E9;border-top:2px solid #4AACE2;clear: both;
            overflow: hidden;margin: 5% auto}
        .handle{width: 80%;border-left: 1px solid #EAE9E9;border-right: 1px solid #EAE9E9;border-bottom: 1px solid #EAE9E9;border-top:2px solid #57E25F;clear: both;
            overflow: hidden;margin: 5% auto}
        .approve img,.handle img{float: left;margin: 6%;}
        .approve p,.handle p{float: left;margin:10%  6%;color: #545353;font-size: 16px;}
        .approve span,.handle span{float: left;display: block;margin:4%  6%;font-size: 48px;color: #e41a1a}
        .right-bottom{width: 100%;box-shadow: #666 0px 0px 10px;background: #fff;margin-top: 1%;clear: both;overflow: hidden}
        .right-bottom p{font-size: 14px;clear: both;margin-left: 5%;color: #6d6c6c}
        .right-bottom p span{color: #ff0000}
        .right-content{width: 90%;margin:5% auto;padding-bottom: 43%}
        .right-content li{border-bottom: 1px solid #ECECEC;clear: both;overflow: hidden}
        .right-content li p{float: left;display: block;border-right: 1px solid #ECECEC;padding:5.2% 0;color: #343434;font-size: 14px;}
        .right-content li span{float: right;display: block;padding:5.2% 0;color: #0959db;font-size: 14px;width: 30%;text-align: center;box-sizing: border-box}
    </style>
</head>
<body>
<div class="content">
    <div class="left">
        <div class="top">
            <div class="title">
                <img src="${ctx}/resources/themes/images/left_one_03.png">
                <h2>我的待办</h2>
            </div>
            <div class="left-content">
                <ul>
                    <li>
                        <div class="matter" onclick="showToDoTabs()">
                            <p>待审批事项</p>
                            <p style="margin-top:5%;line-height: 30px;"><span id="p1">4</span>项</p>
                            <a href="javascript:void(0)" >查看详情</a>
                            <a href="javascript:void(0)" style="float: right"><img src="${ctx}/resources/themes/images/more_06.png"></a>
                        </div>
                    </li>
                    <li>
                        <div class="task" onclick="showUnRectifyTask()">
                            <p>待整改任务</p>
                            <p style="margin-top:5%;line-height: 30px;"><span id="p2">5</span>项</p>
                            <a href="javascript:void(0)" >查看详情</a>
                            <a href="javascript:void(0)" style="float: right"><img src="${ctx}/resources/themes/images/more_06.png"></a>
                        </div>
                    </li>
                    <li>
                        <div class="project" onclick="showUnCheckTask()">
                            <p>待验收任务</p>
                            <p style="margin-top:5%;line-height: 30px;"><span id="p3">7</span>项</p>
                            <a href="javascript:void(0)" >查看详情</a>
                            <a href="javascript:void(0)" style="float: right"><img src="${ctx}/resources/themes/images/more_06.png"></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="peril">
                <div class="title">
                    <img src="${ctx}/resources/themes/images/left_one_03.png">
                    <h2>隐患治理情况</h2>
                </div>
                <p>当前共有<span id="p4"> 9 </span>个隐患正在处理中</p>
                <div class="tu" id="d1">

                </div>
            </div>
            <div class="risk">
                <div class="title">
                    <img src="${ctx}/resources/themes/images/left_one_03.png">
                    <h2>重大风险评审情况</h2>
                </div>
                <p>共有<span id="p5"> 9 </span>处重大风险</p>
                <div class="tu" id="d2">
                </div>
            </div>
        </div>
    </div>
    <div class="right" >
        <div class="right-top">
            <div class="title">
                <img src="${ctx}/resources/themes/images/left_one_03.png">
                <h2>作业许可管理</h2>
            </div>
            <div class="approve">
                <img src="${ctx}/resources/themes/images/rihgt_one_03.png">
                <p>待审批</p>
                <span id="p6">8</span>
            </div>
            <div class="handle">
                <img src="${ctx}/resources/themes/images/right_two_03.png">
                <p>待办理</p>
                <span id="p7">6</span>
            </div>
        </div>
        <div class="right-bottom">
            <div class="title">
                <img src="${ctx}/resources/themes/images/left_one_03.png">
                <h2>今日作业情况</h2>
            </div>
            <p>共有<span id="p8"> 9 </span>项作业进行中</p>
            <div class="right-content">
                <ul id="ul1">

                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    var clientHeight=document.body.clientHeight
    var clientWidth=document.body.clientWidth



    var myChart,myChart2;
    $(function () {
        var leftTopHeight=clientHeight-$(".top .title").height()-$(".matter").height()-$(".peril .title").height()-$(".peril  p").height()-30;
        // alert($(".peril p").height())
        $(".tu").height(leftTopHeight)

        var bottomHeight=clientHeight-$(".right-top").height()
        $(".right-bottom").height(bottomHeight);

        getTodoListCont();
        getTaskData();
        loadHiddenDangerData();
        loadSignificantRiskData();
        workNotAudited();
        workByNotHandled();
        workByWorkType();
        window.addEventListener("resize", function () {

            myChart.resize();
            myChart2.resize();
            var leftTopHeight=clientHeight-$(".top .title").height()-$(".matter").height()-$(".peril .title").height()-$(".peril  p").height()-50;

            $(".tu").height(leftTopHeight)
            var bottomHeight=clientHeight-$(".right-top").height()
            $(".right-bottom").height(bottomHeight);
        });

    })
    //获得代办事项数量
    function getTodoListCont() {
        $.ajax({
            type: "POST",
            url: ROOT_PATH + '/workflow/flowManagement/findWorkItemListCount.shtml',
            data:{
                sort: 'createdTime',
                order: 'desc',
                queryState:1
            },
            dataType: "json",
            success: function(data){
                $("#p1").text(data);
            }
        });
    }
    //查看代办事项详情
    function showToDoTabs() {
        parent.addTab("待办事项",ROOT_PATH + '/workflow/flowManagement/todoList.shtml')
    }
    //获得整改相关数据
    function getTaskData() {
        $.ajax({
            type: 'post',
            url: ROOT_PATH + '/task/selectCount.shtml',
            dataType: "json",
            success: function (result) {
                $("#p2").text(result.zNum)//待整改
                $("#p3").text(result.yNum)//待验收
            }
        });
    }
    //查看待整改相关数据
    function showUnRectifyTask() {
        parent.addTab("待整改任务",ROOT_PATH + '/task/d/list.shtml')
    }
    //查看验收相关的数据
    function showUnCheckTask() {
        parent.addTab("待验收任务",ROOT_PATH + '/task/dy/list.shtml')
    }
    //加载隐患饼状图需要的数据
    function loadHiddenDangerData() {
        $.ajax({
            type: 'post',
            url: ROOT_PATH + '/hiddenDanger/statistics/statisticsByGovernProgress.shtml',
            dataType: "json",
            success: function (result) {
                initHiddenDanger(result);
            }
        });
    }
    //加载隐患饼状图
    function initHiddenDanger(data) {
        var legendData=[];
        var seriesData=[];
        var sumNum=0;
        for(var i=0;i<data.length;i++){
            var num=data[i].num;
            var name=data[i].name;

            legendData.push(name)
            var serie=new EchrtsPie(name,num)
            seriesData.push(serie);
            sumNum+=num;
        }
        $('#p4').text(sumNum)
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('d1'));

        // 指定图表的配置项和数据
        option = {

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'top',
                data: legendData
            },
            series : [
                {
                    name: '隐患治理情况',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    function loadSignificantRiskData() {
        $.ajax({
            type: 'post',
            url: ROOT_PATH + '/risk/statistics/statisticsBySeriousState.shtml',
            dataType: "json",
            success: function (result) {
                initSignificantRisk(result);
            }
        });
    }
    //加载重大风险柱状图
    function initSignificantRisk(data) {
        var xAxisData=[];
        var seriesData=[];
        var sumNum=0;
        for(var i=0;i<data.length;i++){
            var name=data[i].name;
            var num=data[i].num;
            xAxisData.push(name);
            seriesData.push(num)
            sumNum+=num;
            $('#p5').text(sumNum)
        }
        // 基于准备好的dom，初始化echarts实例
        myChart2 = echarts.init(document.getElementById('d2'));

        // 指定图表的配置项和数据
        var option = {

            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
                data: xAxisData
            },
            yAxis: {},
            series: [{
                name: '重大风险评审情况',
                type: 'bar',
                barWidth: '30%',
                data: seriesData
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option);
    }

    //作业许待审批
    function workNotAudited() {
        $.ajax({
            type: 'post',
            url: ROOT_PATH + '/workLicense/apply/countByNotAudited.shtml',
            dataType: "json",
            success: function (result) {
                $('#p6').text(result.data)
            }
        });
    }

    //作业许待办理
    function workByNotHandled() {
        $.ajax({
            type: 'post',
            url: ROOT_PATH + '/workLicense/apply/countByNotHandled.shtml',
            dataType: "json",
            success: function (result) {
                $('#p7').text(result.data)
            }
        });
    }
    //作业许未审批
    function workByWorkType() {
        $.ajax({
            type: 'post',
            url: ROOT_PATH + '/workLicense/apply/countByWorkType.shtml',
            dataType: "json",
            success: function (result) {
                var data=result.data;
                var sumNum=0;
                var html='';
                for(var i=0;i<data.length;i++){
                    var name=data[i].name;
                    var num=data[i].num;
                    sumNum+=num;
                    html+='<li><p style="width: 60%; text-align: center;">'+name+'</p><span>'+num+'</span></li>';

                }
                $('#ul1').html(html)
                $('#p8').text(sumNum)
            }
        });
    }



    function EchrtsPie(name,value) {
        this.name=name;
        this.value=value;
    }
</script>
</body>
</html>
